<template>
  <div>
    <div>childObj:{{ JSON.stringify(childObj) }}</div>
    <div>obj:{{ JSON.stringify(obj) }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue'
const props = defineProps({
  obj: {
    type: Object,
    default: function () {
      return {};
    },
  },
})
// const childObj = reactive({
//   ...props.obj,
//   c: 0,
// })
const childObj = reactive(props.obj)
onMounted(() => {
  props.obj.c = 3;
  // [Vue warn]: Error in mounted hook: "TypeError: Cannot set properties of undefined (setting 'c')"
  // 不能设置未定义的属性
  console.log("childObj", childObj); // {a: 1,b:2,c:0}
  console.log("props.obj", props.obj); // c: 3不是响应式的
})
</script>
<!-- <script>
export default {
  props: {
    obj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      childObj: {
        ...this.obj,
        c: 0,
      },
    };
  },
  mounted() {
    // this.childobj.c = 3;
    this.obj.c = 3;
    // [Vue warn]: Error in mounted hook: "TypeError: Cannot set properties of undefined (setting 'c')"
    // 不能设置未定义的属性
    console.log("this.childObj", this.childObj); // {a: 1,b:2,c:0}
    console.log("this.obj", this.obj); // c: 3不是响应式的
  },
};
</script> -->
